<template>
  <div>
    <el-amap
      vid="amapDemo"
      :zoom="zoom"
      :center="center"
      :amap-manager="amapManager"
      :mapStyle="mapStyle"
      ref="map"
      class="amap-demo"
    >
      <el-amap-polygon
        strokeColor="#ffffff"
        strokeOpacity="0.9"
        fillColor="#c9ebf7"
        fillOpacity="0"
        v-for="(polygon, index) in polygons"
        :key="index"
        strokeWeight="2"
        :path="polygon.Ce.path"
      ></el-amap-polygon>
      <el-amap-marker
        v-for="(marker, index) in markers"
        :key="index"
        :position="marker.position"
        :events="marker.events"
        :visible="marker.visible"
        :draggable="marker.draggable"
        :vid="index"
      ></el-amap-marker>
      <el-amap-text
        v-for="(marker, index) in markers"
        :key="index"
        :text="marker.text"
        :offset="marker.offset"
      ></el-amap-text>
    </el-amap>
  </div>
</template>
<script>
import { AMapManager, lazyAMapApiLoaderInstance } from "vue-amap";
let amapManager = new AMapManager();
export default {
  name: "amap",
  data() {
    return {
      data: [
        {
          position: "112.176178,37.919127",
          address: "古交市矾石沟煤焦有限公司",
        },
        {
          position: "112.118151,37.973507",
          address: "山西古交煤焦集团白家沟煤业有限公司 ",
        },
      ],
      resizeEnable: true, //是否监控地图容器尺寸变化
      zoom: 13,
      amapManager,
      center: [112.175875, 37.907109],
      mapStyle: "amap://styles/8ec06094a79913f3ab1fe98cc29f8046",
      polygons: [],
      district: null,
      markers: [
        {
          position: [112.176178, 37.919127],
          text: "古交市矾石沟煤焦有限公司",
        //   offset: [0, -60],
          events: {
            click: () => {
              //   alert("click marker");
            },
            dragend: (e) => {
              console.log("---event---: dragend");
              this.markers[0].position = [e.lnglat.lng, e.lnglat.lat];
            },
          },
          visible: true,
          draggable: false,
          template: "<span>1</span>",
        },
        {
          position: [112.118151,37.973507],
          text: "山西古交煤焦集团白家沟煤业有限公司",
        //   offset: [10, -60],
          events: {
            click: () => {
              //   alert("click marker");
            },
            dragend: (e) => {
              console.log("---event---: dragend");
              this.markers[0].position = [e.lnglat.lng, e.lnglat.lat];
            },
          },
          visible: true,
          draggable: false,
          template: "<span>1</span>",
        },
      ],
      windows: [],
      window: "",
    };
  },
  methods: {
    drawBounds() {
      var that = this;
      //加载行政区划插件
      if (!that.district) {
        //实例化DistrictSearch
        var opts = {
          subdistrict: 0, //获取边界不需要返回下级行政区
          extensions: "all", //返回行政区边界坐标组等具体信息
          level: "city", //查询行政级别为 市
        };
        that.district = new AMap.DistrictSearch(opts);
      }
      //行政区查询
      let code = "古交市";
      that.district.search(code, function (status, result) {
        that.polygons = [];
        var bounds = result.districtList[0].boundaries;
        console.log(bounds)
        window.sessionStorage.setItem('jsonInfo',bounds);
        if (bounds) {
          for (var i = 0, l = bounds.length; i < l; i++) {
            //生成行政区划polygon
            var polygon = new AMap.Polygon({
              strokeWeight: 1,
              path: bounds[i],
              fillOpacity: 0.4,
              fillColor: "#80d8ff",
              strokeColor: "#0091ea",
            });
            that.polygons.push(polygon);
            
          }
        }
        AMap.Polygon.bind(that.polygons);
        // that.$refs.map.$amap.setFitView(that.polygons); //视口自适应
      });
    },
  },
  mounted: function () {
    setTimeout(() => {
      this.drawBounds();
    }, 200);
  },
};
</script>
<style lang="stylus" scoped>
.amap-demo {
  width: 607px;
  height: 604px;
}
</style>